<!DOCTYPE html>
<html>
<head>
	<title> 4-1 使用组件的细节点</title>
	<script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
	<!-- 
		知识点三:
		  ref的使用

		  如果ref在一个组件上呢?
		  需求:写一个计数器
	 -->
	<div id='root'>
		<!-- 在子组件触发一个事件时,父组件就要监听 change 事件-->
		<counter v-on:change="handleChange" ref="one"></counter>
		<counter v-on:change="handleChange" ref="two"></counter>
		<div>{{total}}</div>
	</div>
	<script type="text/javascript">
		Vue.component('counter',{
			data:function(){
				return {
					number:0
				}
			},
			template:"<div v-on:click='jiafa'>{{number}}</div>",
			methods:{
				jiafa:function(){
					this.number++,
					//当子组件的数据发生变化时,向外(父组件)传递一个“我已被改变的事件”
					this.$emit('change')
				}
			}
		})
		var vm = new Vue({
			el:'#root',
			data:{
				total:0
			},
			methods:{
				handleChange:function(){
					//alert('asd')
					//console.log(this.$refs.one) //获取到的是一个组件的引用
					this.total = this.$refs.one.number + this.$refs.two.number
				}
			}
		})
	</script>
</body>
</html>